<!--
 * @FilePath: /web-vue/src/views/UserBehavior/detail.vue
 * @Description: 【用户行为记录】明细
-->
<template>
  <div>
    <!-- 弹出层-明细 -->
    <el-dialog
      class="detail-dialog"
      title="【用户行为记录】明细"
      :visible.sync="visible"
      top="7vh"
      :close-on-click-modal="false"
      :close-on-press-escape="true" 
    >
      <el-form
        :model="detail"
        ref="detail"
        status-icon
        label-width="150px"
        style="width: 100%"
        class="layer-form-style"
      >
        <el-form-item label="ID编号：" prop="id" size="mini">
          <el-input v-model="detail.id" placeholder="ID编号" readOnly></el-input>
        </el-form-item>
        <el-form-item label="用户ID：" prop="userId" size="mini">
          <el-input v-model="detail.userId" placeholder="请输入用户ID" readOnly style="width:99%"></el-input>
        </el-form-item>
        <el-form-item label="房源ID：" prop="houseId" size="mini">
          <el-input v-model="detail.houseId" placeholder="请输入房源ID" readOnly style="width:99%"></el-input>
        </el-form-item>
        <el-form-item label="行为类型：" prop="behaviorType" size="mini">
          <el-select
            v-model="detail.behaviorType"
            disabled
            placeholder="请选择行为类型"
            style="width:99%"
          >
            <el-option
              v-for="item in $store.state.DICT.behaviorTypeSelect"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权重系数：" prop="weight" size="mini">
          <el-input v-model="detail.weight" placeholder="请输入权重系数" readOnly style="width:99%"></el-input>
        </el-form-item>
        <el-form-item label="扩展信息(如评分)：" prop="extraInfo" size="mini">
          <el-input v-model="detail.extraInfo" placeholder="请输入扩展信息(如评分)" readOnly style="width:99%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-circle-close" @click="() => {
          visible = false;
          detail = {}
          }">关闭窗口</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { DateTimeRange_Picker_Option, DateRange_Picker_Option, Date_Picker_Option } from "@/utils/datePicker";

export default {
  components: {
  },

  data() {
    return {
      visible: false,
      detail: {},
      // 日期选择快捷方式
      DateTimeRange_Picker_Option,
      DateRange_Picker_Option,
      Date_Picker_Option,
    };
  },

  methods: {
    // 打开【用户行为记录】明细窗口
    loadDetail(isShow, key) {
      this.visible = isShow;
      const loading = this.$loading({
          target: document.querySelector(".detail-dialog"),
          lock: true,
          text: "正在加载，请耐心等待！",
      });
      // 查询【用户行为记录】明细API
      this.$api
        .queryOneUserBehavior(key)
        .then((res) => {
          let { status, message, data } = res.data;
          if (status == 200) {
            this.detail = data;
          } else if (status == 403) {
              this.$message({
                message: `权限不足！${message}`,
                type: "error",
                center: true,
                duration: 1680,
              });
          } else {
              this.$alert(`暂无数据记录！${message}`, "【用户行为记录】信息表", {
                type: "info",
                confirmButtonText: "确定",
                callback: (action) => {},
              });
          }
        })
        .catch((err) => {
          console.log(`【用户行为记录】明细查询接口发生错误: ${err}`);
        })
        .finally(() => {
          loading.close();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 明细布局样式
@import "@/assets/css/form-layout.scss";
</style>
